<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<title>用户注册</title>
<html>
<body> 
	<h4 style="text-align: center;">用户登录</h4>
	<div style="width: 90%;margin: 0 auto;margin-top: 30px">
		<form id="re-form" action="{:url('login/doLogin')}" method="post">
        <div class="form-group">
		<label for="exampleInputName2">请输入您的手机号</label>
		<input type="text" class="form-control" name="mobile" id="mobile" placeholder="请输入您的手机号" required>
		<span class="error-info" style="display: none;color: red">手机号格式不正确</span>
		<button id="get-verify" type="button" class="btn btn-default">获取验证码</button>
        <span  id="time-out" style="display: none;">倒计时<span id="timer" style="color: blue">60</span></span>
		</div>
		<div class="form-group">
		<label for="exampleInputEmail2">验证码</label>
		<input type="number" class="form-control" name="verify" placeholder="请输入您手机获取的验证码" required>
		<span class="msg-error-info" style="display: none;color: red">验证码不正确</span>
		</div>
		
		<button id="doRegister" type="submit" class="btn btn-danger">登录</button>&nbsp;&nbsp;<a href="{:url('Register/index')}">注册</a>
        </form>

	</div>
</body>
<script type="text/javascript">
    // 手机号验证
	function isMobile(mobile) {
	    var pattern = /^1[34578]\d{9}$/;
	    return pattern.test(mobile);
	}

	//倒计时60秒
	function countDown(time){
		if(time == 0){
			$("#get-verify").show();
            $("#time-out").hide();
		}else{
			time = time -1 ;
			setTimeout(function(){
              countDown(time);
              $("#timer").text(time);
			},1000)
		}

	}
   
   function getVerify(mobile){
   	   var url = "{:url('Login/getSms')}"; 
       $.get(url,{mobile:mobile},function(data){},'json')
   }

   $(function(){
   	//获取验证码
	$("#get-verify").click(function(){

		var mobile = $('#mobile').val();
        if(!isMobile(mobile)){
        	$(".error-info").show();
        }else{
        	getVerify(mobile);
        	$(".error-info").hide();
        	$("#get-verify").hide();
            $("#time-out").show();
            countDown(60);
        }
       
	})

	//用户注册
	// $("#doRegister").click(function(){
	// 	var url = "{:url('Register/doRegister')}";
	//     var mobile = $('#mobile').val();

	// 	if(!isMobile(mobile)){
 //        	$(".error-info").show();
 //        } else {
 //        	$.post(url,$("#re-form").serialize(),function(data){
	//             if(data.code == 1){
	//            	   window.location.href="{:url('Index/index')}" ;
	//             }else{
	//             	$(".msg-error-info").show();	            }
	// 		},'json');
 //        }
	
	// })

   })
</script>
</html>